<template>
    <div class="dashboard">
      <!-- 欢迎区域 -->
      <div class="welcome-section">
        <div class="welcome-content">
          <h1>欢迎回来，{{ userInfo.realName || userInfo.username }}</h1>
          <p>{{ getGreeting() }} | 今天是 {{ currentDate }}</p>
        </div>
        <div class="quick-actions">
          <el-button type="primary" @click="navigateTo('/products/list')">
            <el-icon><Goods /></el-icon>
            商品管理
          </el-button>
          <el-button type="success" @click="navigateTo('/suppliers/list')">
            <el-icon><Shop /></el-icon>
            供应商管理
          </el-button>
          <el-button type="warning" @click="navigateTo('/traceability/search')">
            <el-icon><Search /></el-icon>
            溯源查询
          </el-button>
          <el-button type="info" @click="navigateTo('/quality/list')">
            <el-icon><Check /></el-icon>
            质量检测
          </el-button>
        </div>
      </div>
  
      <!-- 数据概览卡片 -->
      <div class="stats-grid">
        <div class="stat-card">
          <div class="stat-icon product">
            <el-icon><Goods /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ stats.totalProducts }}</h3>
            <p>商品总数</p>
            <span class="trend up">+{{ stats.newProducts }} 本月新增</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon supplier">
            <el-icon><Shop /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ stats.totalSuppliers }}</h3>
            <p>供应商数量</p>
            <span class="trend up">+{{ stats.activeSuppliers }} 活跃供应商</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon trace">
            <el-icon><Connection /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ stats.totalTraces }}</h3>
            <p>溯源记录</p>
            <span class="trend up">+{{ stats.todayTraces }} 今日新增</span>
          </div>
        </div>
        
        <div class="stat-card">
          <div class="stat-icon quality">
            <el-icon><Check /></el-icon>
          </div>
          <div class="stat-content">
            <h3>{{ stats.qualityRate }}%</h3>
            <p>质量合格率</p>
            <span class="trend up">+{{ stats.qualityImprovement }}% 较上月</span>
          </div>
        </div>
      </div>
  
      <!-- 主要内容区域 -->
      <div class="main-content">
        <!-- 左侧：图表和统计 -->
        <div class="left-panel">
          <!-- 销售趋势图 -->
          <div class="chart-card">
            <div class="card-header">
              <h3>销售趋势</h3>
              <el-select v-model="salesPeriod" size="small" style="width: 120px;">
                <el-option label="最近7天" value="7" />
                <el-option label="最近30天" value="30" />
                <el-option label="最近90天" value="90" />
              </el-select>
            </div>
            <div class="chart-container">
              <div class="chart-placeholder">
                <el-icon><TrendCharts /></el-icon>
                <p>销售趋势图表</p>
                <small>显示最近{{ salesPeriod }}天的销售数据</small>
              </div>
            </div>
          </div>
  
          <!-- 库存预警 -->
          <div class="chart-card">
            <div class="card-header">
              <h3>库存预警</h3>
              <el-button type="text" @click="navigateTo('/products/list')">查看全部</el-button>
            </div>
            <div class="warning-list">
              <div v-for="item in lowStockItems" :key="item.id" class="warning-item">
                <div class="item-info">
                  <h4>{{ item.name }}</h4>
                  <p>{{ item.category }}</p>
                </div>
                <div class="item-stats">
                  <span class="stock-count">{{ item.stock }}</span>
                  <span class="stock-unit">{{ item.unit }}</span>
                </div>
                <div class="item-action">
                  <el-button type="primary" size="small">补货</el-button>
                </div>
              </div>
              <div v-if="lowStockItems.length === 0" class="empty-state">
                <el-icon><CircleCheck /></el-icon>
                <p>暂无库存预警</p>
              </div>
            </div>
          </div>
        </div>
  
        <!-- 右侧：快速操作和通知 -->
        <div class="right-panel">
          <!-- 快速操作 -->
          <div class="action-card">
            <div class="card-header">
              <h3>快速操作</h3>
            </div>
            <div class="action-grid">
              <div class="action-item" @click="navigateTo('/products/form')">
                <el-icon><Plus /></el-icon>
                <span>新增商品</span>
              </div>
              <div class="action-item" @click="navigateTo('/suppliers/form')">
                <el-icon><Plus /></el-icon>
                <span>新增供应商</span>
              </div>
              <div class="action-item" @click="navigateTo('/quality/inspection')">
                <el-icon><Check /></el-icon>
                <span>质量检测</span>
              </div>
              <div class="action-item" @click="navigateTo('/traceability/search')">
                <el-icon><Search /></el-icon>
                <span>溯源查询</span>
              </div>
              <div class="action-item" @click="navigateTo('/statistics/sales')">
                <el-icon><DataAnalysis /></el-icon>
                <span>销售统计</span>
              </div>
              <div class="action-item" @click="navigateTo('/statistics/inventory')">
                <el-icon><Box /></el-icon>
                <span>库存统计</span>
              </div>
            </div>
          </div>
  
          <!-- 最近活动 -->
          <div class="activity-card">
            <div class="card-header">
              <h3>最近活动</h3>
              <el-button type="text" @click="navigateTo('/system/logs')">查看全部</el-button>
            </div>
            <div class="activity-list">
              <div v-for="activity in recentActivities" :key="activity.id" class="activity-item">
                <div class="activity-icon">
                  <el-icon v-if="activity.type === 'product'"><Goods /></el-icon>
                  <el-icon v-else-if="activity.type === 'supplier'"><Shop /></el-icon>
                  <el-icon v-else-if="activity.type === 'quality'"><Check /></el-icon>
                  <el-icon v-else><InfoFilled /></el-icon>
                </div>
                <div class="activity-content">
                  <p>{{ activity.description }}</p>
                  <span class="activity-time">{{ formatTime(activity.time) }}</span>
                </div>
              </div>
              <div v-if="recentActivities.length === 0" class="empty-state">
                <el-icon><InfoFilled /></el-icon>
                <p>暂无活动记录</p>
              </div>
            </div>
          </div>
  
          <!-- 系统状态 -->
          <div class="status-card">
            <div class="card-header">
              <h3>系统状态</h3>
            </div>
            <div class="status-list">
              <div class="status-item">
                <span class="status-label">数据库连接</span>
                <span class="status-value success">正常</span>
              </div>
              <div class="status-item">
                <span class="status-label">API服务</span>
                <span class="status-value success">正常</span>
              </div>
              <div class="status-item">
                <span class="status-label">文件存储</span>
                <span class="status-value success">正常</span>
              </div>
              <div class="status-item">
                <span class="status-label">缓存服务</span>
                <span class="status-value success">正常</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  import { defineComponent, ref, computed, onMounted } from 'vue'
  import { useRouter } from 'vue-router'
  import { getUserInfo } from '@/utils/auth'
  import { 
    Goods, Shop, Search, Check, Connection, TrendCharts, 
    CircleCheck, Plus, DataAnalysis, Box, InfoFilled 
  } from '@element-plus/icons-vue'
  
  export default defineComponent({
    name: 'Dashboard',
    components: {
      Goods, Shop, Search, Check, Connection, TrendCharts,
      CircleCheck, Plus, DataAnalysis, Box, InfoFilled
    },
    setup() {
      const router = useRouter()
      const salesPeriod = ref('7')
      
      // 用户信息
      const userInfo = computed(() => {
        return getUserInfo() || {
          username: 'Guest',
          realName: '访客用户',
          role: 'user'
        }
      })
      
      // 当前日期
      const currentDate = computed(() => {
        return new Date().toLocaleDateString('zh-CN', {
          year: 'numeric',
          month: 'long',
          day: 'numeric',
          weekday: 'long'
        })
      })
      
      // 模拟统计数据
      const stats = ref({
        totalProducts: 1256,
        newProducts: 23,
        totalSuppliers: 89,
        activeSuppliers: 67,
        totalTraces: 3456,
        todayTraces: 45,
        qualityRate: 98.5,
        qualityImprovement: 2.1
      })
      
      // 库存预警数据
      const lowStockItems = ref([
        { id: 1, name: '有机牛奶', category: '乳制品', stock: 15, unit: '箱' },
        { id: 2, name: '新鲜鸡蛋', category: '蛋类', stock: 8, unit: '盒' },
        { id: 3, name: '进口牛肉', category: '肉类', stock: 12, unit: 'kg' }
      ])
      
      // 最近活动数据
      const recentActivities = ref([
        { id: 1, type: 'product', description: '新增商品：有机蔬菜套装', time: new Date(Date.now() - 1000 * 60 * 30) },
        { id: 2, type: 'quality', description: '完成质量检测：牛奶批次20241201', time: new Date(Date.now() - 1000 * 60 * 60) },
        { id: 3, type: 'supplier', description: '更新供应商信息：绿色农场', time: new Date(Date.now() - 1000 * 60 * 120) },
        { id: 4, type: 'product', description: '商品下架：过期食品', time: new Date(Date.now() - 1000 * 60 * 180) }
      ])
      
      // 获取问候语
      const getGreeting = () => {
        const hour = new Date().getHours()
        if (hour < 6) return '夜深了，请注意休息'
        if (hour < 9) return '早上好，祝您工作愉快'
        if (hour < 12) return '上午好，工作顺利'
        if (hour < 14) return '中午好，记得休息'
        if (hour < 18) return '下午好，继续加油'
        if (hour < 22) return '晚上好，辛苦了'
        return '夜深了，请注意休息'
      }
      
      // 格式化时间
      const formatTime = (time) => {
        const now = new Date()
        const diff = now - time
        const minutes = Math.floor(diff / (1000 * 60))
        const hours = Math.floor(diff / (1000 * 60 * 60))
        const days = Math.floor(diff / (1000 * 60 * 60 * 24))
        
        if (minutes < 1) return '刚刚'
        if (minutes < 60) return `${minutes}分钟前`
        if (hours < 24) return `${hours}小时前`
        if (days < 7) return `${days}天前`
        return time.toLocaleDateString()
      }
      
      // 页面导航
      const navigateTo = (path) => {
        router.push(path)
      }
      
      // 组件挂载时加载数据
      onMounted(() => {
        console.log('Dashboard组件已挂载')
      })
      
      return {
        userInfo,
        currentDate,
        salesPeriod,
        stats,
        lowStockItems,
        recentActivities,
        getGreeting,
        formatTime,
        navigateTo
      }
    }
  })
  </script>
  
  <style scoped>
  .dashboard {
    padding: 20px;
    background-color: #f5f7fa;
    min-height: 100vh;
  }
  
  /* 欢迎区域 */
  .welcome-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .welcome-content h1 {
    margin: 0 0 8px 0;
    font-size: 28px;
    font-weight: 600;
  }
  
  .welcome-content p {
    margin: 0;
    opacity: 0.9;
    font-size: 16px;
  }
  
  .quick-actions {
    display: flex;
    gap: 12px;
  }
  
  .quick-actions .el-button {
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: white;
    backdrop-filter: blur(10px);
  }
  
  .quick-actions .el-button:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.5);
  }
  
  /* 统计卡片 */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }
  
  .stat-card {
    background: white;
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }
  
  .stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  }
  
  .stat-icon {
    width: 60px;
    height: 60px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
  }
  
  .stat-icon.product { background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); }
  .stat-icon.supplier { background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%); }
  .stat-icon.trace { background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%); }
  .stat-icon.quality { background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%); }
  
  .stat-content h3 {
    margin: 0 0 4px 0;
    font-size: 32px;
    font-weight: 700;
    color: #1a202c;
  }
  
  .stat-content p {
    margin: 0 0 8px 0;
    color: #718096;
    font-size: 14px;
  }
  
  .trend {
    font-size: 12px;
    padding: 4px 8px;
    border-radius: 6px;
    font-weight: 500;
  }
  
  .trend.up {
    background: #f0fff4;
    color: #38a169;
  }
  
  /* 主要内容区域 */
  .main-content {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 24px;
  }
  
  /* 图表卡片 */
  .chart-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    margin-bottom: 24px;
    overflow: hidden;
  }
  
  .card-header {
    padding: 20px 24px;
    border-bottom: 1px solid #e2e8f0;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  
  .card-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1a202c;
  }
  
  .chart-container {
    padding: 24px;
    min-height: 300px;
  }
  
  .chart-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 250px;
    color: #a0aec0;
    text-align: center;
  }
  
  .chart-placeholder .el-icon {
    font-size: 48px;
    margin-bottom: 16px;
  }
  
  .chart-placeholder p {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 500;
  }
  
  .chart-placeholder small {
    font-size: 14px;
    opacity: 0.7;
  }
  
  /* 预警列表 */
  .warning-list {
    padding: 0 24px 24px;
  }
  
  .warning-item {
    display: flex;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #f7fafc;
  }
  
  .warning-item:last-child {
    border-bottom: none;
  }
  
  .item-info {
    flex: 1;
  }
  
  .item-info h4 {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1a202c;
  }
  
  .item-info p {
    margin: 0;
    font-size: 12px;
    color: #718096;
  }
  
  .item-stats {
    margin: 0 16px;
    text-align: center;
  }
  
  .stock-count {
    display: block;
    font-size: 20px;
    font-weight: 700;
    color: #e53e3e;
  }
  
  .stock-unit {
    font-size: 12px;
    color: #718096;
  }
  
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: #a0aec0;
    text-align: center;
  }
  
  .empty-state .el-icon {
    font-size: 32px;
    margin-bottom: 12px;
  }
  
  .empty-state p {
    margin: 0;
    font-size: 14px;
  }
  
  /* 右侧面板 */
  .right-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }
  
  .action-card, .activity-card, .status-card {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
    overflow: hidden;
  }
  
  /* 快速操作 */
  .action-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: #f7fafc;
  }
  
  .action-item {
    background: white;
    padding: 20px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  
  .action-item:hover {
    background: #f7fafc;
  }
  
  .action-item .el-icon {
    font-size: 24px;
    color: #667eea;
  }
  
  .action-item span {
    font-size: 14px;
    font-weight: 500;
    color: #1a202c;
  }
  
  /* 活动列表 */
  .activity-list {
    padding: 0 24px 24px;
  }
  
  .activity-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 0;
    border-bottom: 1px solid #f7fafc;
  }
  
  .activity-item:last-child {
    border-bottom: none;
  }
  
  .activity-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #f7fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
  }
  
  .activity-icon .el-icon {
    font-size: 16px;
    color: #667eea;
  }
  
  .activity-content {
    flex: 1;
  }
  
  .activity-content p {
    margin: 0 0 4px 0;
    font-size: 14px;
    color: #1a202c;
    line-height: 1.4;
  }
  
  .activity-time {
    font-size: 12px;
    color: #718096;
  }
  
  /* 系统状态 */
  .status-list {
    padding: 0 24px 24px;
  }
  
  .status-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f7fafc;
  }
  
  .status-item:last-child {
    border-bottom: none;
  }
  
  .status-label {
    font-size: 14px;
    color: #1a202c;
  }
  
  .status-value {
    font-size: 14px;
    font-weight: 500;
    padding: 4px 8px;
    border-radius: 6px;
  }
  
  .status-value.success {
    background: #f0fff4;
    color: #38a169;
  }
  
  /* 响应式设计 */
  @media (max-width: 1200px) {
    .main-content {
      grid-template-columns: 1fr;
    }
    
    .right-panel {
      order: -1;
    }
  }
  
  @media (max-width: 768px) {
    .welcome-section {
      flex-direction: column;
      gap: 20px;
      text-align: center;
    }
    
    .quick-actions {
      flex-wrap: wrap;
      justify-content: center;
    }
    
    .stats-grid {
      grid-template-columns: 1fr;
    }
    
    .action-grid {
      grid-template-columns: 1fr;
    }
  }
  </style> 